---
type: tutorial
title: Crie e passe dados para um layout customizado do blog
description: >-
  Tutorial: Construa seu primeiro blog Astro —

  Crie um layout de postagem do blog para seus arquivos Markdown e passe seus
  valores do frontmatter como props
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import PreCheck from '~/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"

Agora que você tem um layout para suas páginas, é hora de adicionar um layout para postagens do blog!

<PreCheck>
  - Criar um novo layout de postagens do blog para seus arquivos Markdown
  - Passar valores frontmatter YAML como props para o componente de layout
</PreCheck>

## Adicione um layout para suas postagens do blog

Quando você inclui a propriedade frontmatter `layout` em um arquivo `.md`, todos os valores de seu frontmatter YAML são disponibilizados ao arquivo do layout.

<Steps>
1. Crie um novo arquivo em `src/layouts/MarkdownPostLayout.astro`

2. Copie o seguinte código em `MarkdownPostLayout.astro`

    ```astro title="src/layouts/MarkdownPostLayout.astro"
    ---
    const { frontmatter } = Astro.props;
    ---
    <h1>{frontmatter.title}</h1>
    <p>Escrito por {frontmatter.author}</p>
    <slot />
    ```

3. Adicione a seguinte propriedade frontmatter em `post-1.md`

    ```markdown title="src/pages/posts/post-1.md" ins={2}
    ---
    layout: ../../layouts/MarkdownPostLayout.astro
    title: 'Minha Primeira Postagem no Blog'
    pubDate: 2022-07-01
    description: 'Esta é a primeira postagem do meu novo blog Astro.'
    author: 'Aluno de Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        alt: 'A logo completa do Astro.'
    tags: ["astro", "blogueirando", "aprendendo em público"]
    ---
    ```

4. Verifique a pré-visualização do seu navegador novamente em `http://localhost:4321/posts/post-1` e note o que o layout adicionou a sua página. 

5. Adicione a mesma propriedade de layout para suas duas outras postagens do blog `post-2.md` e `post-3.md`. Verifique em seu navegador que seu layout também é aplicado nessas postagens.
</Steps>

:::tip
Ao utilizar layouts, você agora tem a opção de incluir elementos, como um título da página, no conteúdo Markdown ou no layout. Lembre-se de visualmente inspecionar a pré-visualização da sua página e fazer quaisquer ajustes necessários para evitar elementos duplicados. 
:::

<Box icon="puzzle-piece">

## Tente você mesmo - Customize seu layout de postagem do blog

**Desafio**: Identifique itens comuns em toda postagem do blog, e utilize `MarkdownPostLayout.astro` para renderizá-los, ao invés de escrevê-los em seu Markdown em `post-1.md` e em toda futura postagem do blog.

Aqui está um exemplo de refatoração do seu código para incluir a `pubDate` no componente de layout ao invés de escrevê-la no corpo do seu Markdown:

```markdown title="src/pages/posts/post-1.md" del={1}
Publicado em: 2022-07-01

Bem-vindo ao meu _novo blog_ sobre aprendendo Astro! Aqui, eu irei compartilhar minha jornada de aprendizado enquanto eu construo um novo website.
```

```astro title="src/layouts/MarkdownPostLayout.astro" ins={5}
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>Publicado em: {frontmatter.pubDate.toString().slice(0,10)}</p>
<p>Escrito por {frontmatter.author}</p>
<slot />
```

Refatore o quanto você achar útil para você, e adicione o quanto você quiser ao seu layout, lembrando que tudo o que você adicionar seu layout é uma coisa a menos que você irá escrever em cada uma das postagens do blog!

Aqui está um exemplo de um layout refatorado que deixa apenas o conteúdo individual da postagem do blog renderizado por um slot. Sinta-se livre para utilizá-lo, ou criar seu próprio!

```astro title="src/layouts/MarkdownPostLayout.astro"
---
const { frontmatter } = Astro.props;
---
<h1>{frontmatter.title}</h1>
<p>{frontmatter.pubDate.toString().slice(0,10)}</p>
<p><em>{frontmatter.description}</em></p>
<p>Escrito por: {frontmatter.author}</p>
<img src={frontmatter.image.url} width="300" alt={frontmatter.image.alt} />
<slot />
```
</Box>

:::note[Evite duplicação]
 Qualquer coisa renderizada por seu layout **não** precisa ser escrito em sua postagem do blog! Se você notar qualquer duplicação ao verificar sua pré-visualização do navegador, então certifique-se de remover conteúdo do seu arquivo Markdown.
:::

 

<Box icon="question-mark">

### Teste seu conhecimento
Você consegue descobrir o que deve ir nos espaços em branco para que os dois componentes juntos a seguir produzam código Astro funcional?

1.  ```markdown title="src/pages/posts/learning-astro.md"
    ---
    layout: ../../__________/MeuLayoutMarkdown.astro
    titulo: "Aprendendo sobre Markdown no Astro"
    autor: Aluno de Astro
    ____: 2022-08-08
    ---
    Eu aprendi tanto hoje! Astro me permite escrever em Markdown, mas também a utilizar variáveis do frontmatter. Eu posso até acessar esses valores em um componente de layout Astro.
    ```

2.  ```astro title="src/layouts/MeuLayoutMarkdown.astro"
    ---
    import ____________ from '../components/Rodape.astro'
    const { ___________ } = Astro.props
    ---
    <h1>{frontmatter.titulo}</h1>
    <p>Escrito por: {frontmatter.______} em {frontmatter.dataPub}</p>
    < _______ />
    <Rodape />
    ```
    <details>
        <summary>Me mostre os espaços em branco preenchidos!</summary>

        1.  ```markdown title="src/pages/posts/learning-astro.md" "layouts" "dataPub"
            ---
            layout: ../../layouts/MeuLayoutMarkdown.astro
            titulo: "Aprendendo sobre Markdown no Astro"
            autor: Aluno de Astro
            dataPub: 2022-08-08
            ---
            Eu aprendi tanto hoje! Astro me permite escrever em Markdown, mas também a utilizar variáveis do frontmatter. Eu posso até acessar esses valores em um componente de layout Astro.
            ```

        2.  ```astro title="src/layouts/MeuLayoutMarkdown.astro" " Rodape " " frontmatter " "autor" "slot"
            ---
            import Rodape from '../components/Rodape.astro'
            const { frontmatter } = Astro.props
            ---
            <h1>{frontmatter.titulo}</h1>
            <p>Escrito por: {frontmatter.autor} em {frontmatter.dataPub}</p>
            <slot />
            <Rodape />
            ```
    </details>
</Box>

<Box icon="check-list">

## Checklist

<Checklist>
- [ ] Eu posso adicionar uma propriedade de layout a minha postagem Markdown do blog em seu frontmatter YAML.
- [ ] Eu posso criar um layout separado para postagens Markdown.
- [ ] Eu posso utilizar valores do frontmatter de uma postagem do blog em um componente de layout.
</Checklist>

</Box>

### Recursos

- [Layouts Markdown no Astro](/pt-br/guides/markdown-content/#frontmatter-layout-property)

- [Props de Layout Markdown](/pt-br/basics/layouts/#props-de-layout-markdown)

- [Introdução ao YAML](https://dev.to/paulasantamaria/introduction-to-yaml-125f) <Badge class="neutral-badge" text="externo" />
